<template>
    <h2>一个人的信息</h2>
    姓：<input type="text" v-model="person.firstName"/><br>
    名：<input type="text" v-model="person.lastName"/><br>
    <span>全名：{{person.fullName}}</span><br>
    修改全名：<input type="text" v-model="person.fullName"/><br>
</template>

<script>
//vue3中计算属性是组合api
import { reactive, computed } from 'vue';
export default {
  name: 'Demo', 
  /* 
  //vue2计算属性写法
  computed: {
    fullName() {
        return this.person.firstName + this.person.lastName
    }
  },
  */  
  setup() {
    let person = reactive({
        firstName: '张',
        lastName: '三',
    })

    //1.计算属性简写形式，计算属性只能读不能写，调用computed函数，参数是一个回调函数
    /*
    let fullName = computed(()=>{
        return person.firstName + person.lastName
    })
    */
    //2.计算属性完整写法，计算属性可读可写，调用computed函数，参数是一个对象，内部有getter/setter
    let fullName = computed({
        get() {
            return person.firstName + '-' + person.lastName
        },
        set(value) {
            const nameArr = value.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })


    //把fullName加到person中，因为proxy，fullName也是响应式的
    person.fullName = fullName

    return {
        person,
        // fullName,
    }
  }
}
</script>

<style>
</style>